项目清算管理-详情
<template>
  <div class="liquidationDetail">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/projectLiquidationManagement' }">项目清算管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="part">
      <div class="title">项目运营信息</div>
      <div class="operationalAnalysis">
        <p>
          <span>项目：</span>
          <span>{{form.projectName}}</span>
        </p>
        <p>
          <span>项目营收：</span>
          <span>{{form.projectIncome == 0 || form.projectIncome ? '￥':''}}{{form.projectIncome}}</span>
        </p>
        <p>
          <span>项目利润率：</span>
          <span>{{form.profit}}{{form.profit == 0 || form.profit ? '%':''}}</span>
        </p>
      </div>
    </div>
    <div class="part">
      <div class="title">跟投主体项目清算明细信息</div>
      <template>
        <el-table
          border
          :data="mainpartList"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="mainpartName"
            label="公司/个人名称"
            width="280">
          </el-table-column>
          <el-table-column
            align="center"
            prop="mainpartInvest"
            label="跟投主体"
            width="180">
            <template slot-scope='scope'>
              <span v-show="scope.row.mainpartInvest == 0">内部法人</span>
              <span v-show="scope.row.mainpartInvest == 1">渠道/经纪</span>
              <span v-show="scope.row.mainpartInvest == 2">开发商</span>
              <span v-show="scope.row.mainpartInvest == 3">内部员工</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="proportion"
            label="比例(%)"
            width="150">
          </el-table-column>
          <el-table-column
            align="center"
            prop="quota"
            width="180"
            label="跟投额度（元）">
            <template slot-scope="scope">
              {{scope.row.quota | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="amountBonus"
            width="180"
            label="分红金额（元）">
            <template slot-scope="scope">
              {{scope.row.amountBonus | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            prop="sumAmount"
            label="结算总额（元）">
            <template slot-scope="scope">
              {{scope.row.sumAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="profit"
            label="收益率(%)">
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChangeMain"
          @current-change="handleCurrentChange(1)"
          :current-page.sync="pageData1.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData1.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize1">
        </el-pagination>
      </div>
    </div>
    <div class="part">
      <div class="title">内部员工项目清算明细信息</div>
      <template>
        <el-table
          border
          :data="staffList"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderNumber"
            label="订单号"
            width="280">
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="员工"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="jobNumber"
            label="工号">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="department"
            label="部门">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="position"
            label="职位">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="quota"
            label="实付金额（元）">
            <template slot-scope="scope">
              {{scope.row.quota | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="number"
            label="跟投份数">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="amountBonus"
            label="分红金额（元）">
            <template slot-scope="scope">
              {{scope.row.amountBonus | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="sumAmount"
            label="结算总额（元）">
            <template slot-scope="scope">
              {{scope.row.sumAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="profit"
            label="收益率(%)">
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChangeStaff"
          @current-change="handleCurrentChange(2)"
          :current-page.sync="pageData2.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData2.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize2">
        </el-pagination>
      </div>
    </div>
    <div class="part">
      <div class="title">内部员工退款明细信息</div>
      <div class="quota">
        <p>
          <span>退款金额：</span>
          <span>￥{{yingTui}}</span>
        </p>
        <p>
          <span>未退款金额</span>
          <span>￥{{weiTui}}</span>
        </p>
        <p>
          <span>已退款金额</span>
          <span>￥{{yiTui}}</span>
        </p>
      </div>
      <template>
        <el-table
          border
          :data="refundList"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderNumber"
            label="订单号"
            width="280">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="员工"
            width="150">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="jobNumber"
            label="工号">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="department"
            label="部门">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="position"
            label="职位">
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="number"
            label="跟投份数">
          </el-table-column>
          <el-table-column
            align="center"
            prop="quota"
            label="跟投额度（元）"
            width="150">
            <template slot-scope="scope">
              {{scope.row.quota | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="realAmount"
            label="实付金额（元）"
            width="150">
            <template slot-scope="scope">
              {{scope.row.realAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="refundAmount"
            label="退费金额（元）"
            width="150">
            <template slot-scope="scope">
              {{scope.row.refundAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            prop="status"
            label="退款状态">
            <template slot-scope="scope">
              {{scope.row.status ? '已退款':'未退款'}}
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChangeReu"
          @current-change="handleCurrentChange(3)"
          :current-page.sync="pageData3.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData3.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize3">
        </el-pagination>
      </div>
    </div>
    <div class="part">
      <div class="title">操作记录</div>
      <template>
        <el-table
          border
          :data="recodeList"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="操作"
            width="180">
            <template slot-scope="scope">
              <span v-show="scope.row.actionName == 'Submit'">审批通过</span>
              <span v-show="scope.row.actionName == 'Reject'">审批不通过</span>
              <span v-show="scope.row.actionName == ''">已提交审核</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="participantName"
            label="操作人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="displayName"
            label="角色">
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiveTime"
            label="时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="itemComment"
            label="备注">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
  name:'liquidationDetail',
  data(){
    return {
      form: {
        profit: null,
        projectIncome: null,
        projectName: null
      },
      mainpartList: [],
      staffList: [],
      refundList: [],
      yingTui:null,
      yiTui:null,
      weiTui:null,
      recodeList:[],
      totalSize1:0,
      totalSize2:0,
      totalSize3:0,
      pageData1:{
        pageSize:10,
        pageNum:1
      },
      pageData2:{
        pageSize:10,
        pageNum:1
      },
      pageData3:{
        pageSize:10,
        pageNum:1
      }
    }
  },
  filters:{
    numFormat(val ){
      val += ''
      let x = val.split('.');
      let x1 = x[0] 
      let x2 = x.length > 1 ? '.' + x[1] : ''
      var rgx = /(\d+)(\d{3})/  
      while (rgx.test(x1)) {  
      x1 = x1.replace(rgx, '$1' + ',' + '$2')
      }
      return x1 + x2
    }
  },
  created(){
    this.getOperateInfo()
    this.gettMainDetail()
    this.getStaffDetail()
    this.getRefundDetail()
    this.settlementOperationLog()
  },
  methods:{
    // 运营信息
    getOperateInfo(){
      this.axios.post(api.getSettlementById,{
        id:this.$route.query.id
      }).then((res)=>{
        console.log(res.data.data)
        // 运营信息
        if(res.data.data){
          this.form.projectName = res.data.data.projectName
          this.form.projectIncome = res.data.data.projectIncome
          this.form.profit = res.data.data.profit
        }
          console.log(this.form)
      })
    },
    // 主体
    gettMainDetail(){
      this.axios.post(api.getMainpartInfoById,{
        settlementId:this.$route.query.id,
        pageSize:this.pageData1.pageSize,
        pageNum:this.pageData1.pageNum
      }).then((res)=>{
        console.log('主体',res.data)
        this.mainpartList = res.data.data.list
        this.totalSize1 = res.data.data.total
      })
    },
    // 员工
    getStaffDetail(){
      this.axios.post(api.getStaffInfoById,{
        settlementId:this.$route.query.id,
        pageSize:this.pageData2.pageSize,
        pageNum:this.pageData2.pageNum
      }).then((res)=>{
        console.log('员工',res.data)
        this.staffList = res.data.data.list
        this.totalSize2 = res.data.data.total
      })
    },
    // 退费
    getRefundDetail(){
      console.log(this.pageData3.pageSize)
      this.axios.post(api.getRefundInfoById,{
        settlementId:this.$route.query.id,
        pageSize:this.pageData3.pageSize,
        pageNum:this.pageData3.pageNum
      }).then((res)=>{
        console.log('退费',res.data)
        this.weiTui = res.data.data.weiTui
        this.yiTui = res.data.data.yiTui
        this.yingTui = res.data.data.yingTui
        this.refundList = res.data.data.pageList.list
        this.totalSize3 = res.data.data.pageList.total
      })
    },

    // 操作记录
    settlementOperationLog(){
      this.axios.post(api.settlementOperationLog,{
        id:this.$route.query.id
      }).then((res)=>{
        console.log(res)
        if( res.data.code == 200 ){
          this.recodeList = res.data.data
        }
      })
    },

    handleSizeChangeMain(val) {
      console.log(val)
      this.pageData1.pageSize = val
      this.gettMainDetail()
    },
    handleSizeChangeStaff(val) {
      this.pageData2.pageSize = val
      this.getStaffDetail()
    },
    handleSizeChangeReu(val) {
      this.pageData3.pageSize = val
      this.getRefundDetail()
    },
    handleCurrentChange(val) {
      if(val == 1){
        this.gettMainDetail()
      }else if(val == 2){
        this.getStaffDetail()
      }else if(val == 3){
        this.getRefundDetail()
      }
    }
  }
}
</script>

<style lang='stylus'>
.liquidationDetail{
  .bread-title{
    height:30px;
    font-size:16px;
  }
  .part{
    margin-bottom :50px;
  }
  .title{
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
  }
  .operationalAnalysis{
    display:flex;
    p{
      margin:0;
      padding:0;
      flex:1;
      font-size:14px;
      span:nth-child(1){
        display :inline-block;
      }
      span:nth-child(2){
        display :inline-block;
        min-width:150px;
      }
    }
  }
  .el-input{
    width:450px;
  }
  .el-button{
    margin-left:200px;
  }
  .line{
    height:1px;
    background:#ccc;
    margin-bottom:50px;
  }
  .el-pagination{
    margin-top:20px;
  }
  .quota{
    display:flex;
    width:800px;
    p{
      flex:1;
    }
  }
}
</style>
